<template>
    <div>
        <el-dialog  :title="title" modal="true"  :fullscreen="fullscreen" center="true" destroy-on-close="true" v-model="showSysUserEdit" v-drag>
            <el-form :model="formObj" :inline="true" :rules="rules" label-position="right" ref="formSysUserEdit" class="demo-form-inline">
                <el-form-item prop="name" label="真实姓名" :label-width="formLabelWidth">
                    <el-input v-model="formObj.name" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item prom="username" label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="formObj.username" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item prom="password" label="密码" :label-width="formLabelWidth">
                    <el-input v-model="formObj.password" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item prom="psw" label="重复密码" :label-width="formLabelWidth">
                    <el-input v-model="formObj.psw" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="formObj.age" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="formObj.phone" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="formObj.mail" autocomplete="off" style="width: 260px"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                    <el-radio-group v-model="formObj.sex" style="width: 260px">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="所属角色" :label-width="formLabelWidth">
                    <el-input @click="roleSelect" v-model="formObj.roleNames" autocomplete="off" style="width: 600px" readonly="true"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                     <el-button type="primary" @click="saveUser()">保 存</el-button>
                     <el-button @click="showSysUserEdit = false">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <SelectRole ref="refSelectRole" @callBack="roleSelected"></SelectRole>


</template>

<script>
    import {clearObject, postReq, putReq, getReq} from "../../../utils/api";
    import { ElMessage } from 'element-plus'
    import  SelectRole from './SelectRole'
    import md5 from 'js-md5'
    export default {
        name: "SysMenuEdit",
        components:{
            SelectRole
        },
        data(){
            return{
                formObj:{
                    id:undefined,
                    name:undefined,
                    legalPerson:undefined,
                    creditCode:undefined,
                    companyType:undefined,
                    manageStatus:undefined,
                    createTime:undefined,
                    regCode:undefined,
                    regAddress:undefined,
                    psw:undefined,
                    mail:undefined,
                    roleNames:undefined,
                    roles:undefined,
                    password:undefined,
                    psw:undefined,
                    sex:undefined,
                },

                roleIds:[],
                showSysUserEdit:false,
                title:'',
                id:undefined,
                formLabelWidth: '100px',
                fullscreen:false,
                rules:{
                    name: [
                        { required: true, message: '请填写真实姓名', trigger: 'blur' }
                    ],
                    username: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' }
                    ],
                    psw: [
                        { required: true, message: '请重复填写密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            open(id){
                if (id!==undefined){
                    //编辑
                    this.id = id
                    getReq('/api/sys_user/vo/'+id,{}).then(res=>{
                        this.formObj = res.data.data
                    })
                }else {
                    clearObject(this.formObj)
                }
                this.showSysUserEdit=true
            },

            roleSelect(){
                this.$refs.refSelectRole.open(this.id)
            },
            roleSelected(data){
                 this.formObj.roleNames = data.name.toString()
                 this.formObj.roles = data.ids.toString()
            },
            saveUser(){
                this.$refs['formSysUserEdit'].validate((valid) => {
                    if (valid) {

                        this.formObj.password = md5(this.formObj.password)
                        this.formObj.psw = md5(this.formObj.psw)

                        if (this.formObj.id){
                            //编辑
                            putReq('/api/sys_user/update/'+this.formObj.id,this.formObj).then(res=>{
                                this.$emit('page')
                                this.showSysUserEdit=false
                                ElMessage.success({
                                    message: '编辑成功！',
                                    type: 'success'
                                });
                            })
                        }else {
                            //新增
                             if (this.formObj.password!==this.formObj.psw){
                                ElMessage.warning({
                                    message: '密码不一致！',
                                    type: 'warning'
                                });
                             }else{
                                postReq('/api/sys_user/add',this.formObj).then(res=>{
                                    if (res.data.data){
                                        this.$emit('page')
                                        this.showSysUserEdit=false
                                        ElMessage.success({
                                            message: '添加成功！',
                                            type: 'success'
                                        });
                                    }
                                })
                            }

                        }
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>